<template>
	<view class="content">
		<image class="head_img" src="../../static/logo.png" mode="widthFix"></image>
		<view class="center">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column inp" :class="isFocus?'hoverr':''">
					<input class="uni-input inpu" focus name="username" placeholder="Username" @focus="isFocus=true;isFocus2=false" />
				</view>
				<view class="uni-form-item uni-column inp" :class="isFocus2?'hoverr':''">
					<input class="uni-input inpu" type="password" name="password" placeholder="Password" @focus="isFocus2=true;isFocus=false" />
				</view>
				<view class="uni-btn-v btns">
					<button class="btn" form-type="submit">登录</button>
					<button class="btn" @click="goToPage('/pages/login/register')">注册</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				userinfo: {},
				isFocus:false,
				isFocus2:false,
			}
		},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url
				});
			},
			async formSubmit(e) {
				// // console.log(e)
				let username = e.detail.value.username
				let password = e.detail.value.password
				if (username && password) {
					let BaseUrl = getApp().globalData.BaseUrl
					await uni.request({
						url: BaseUrl + '/login',
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						data: {
							username: username,
							password: password
						},
						success: (res) => {
							// console.log(res)
							if (res.data.code == 1002) {
								uni.showToast({
									title: "密码错误",
									icon: "error"
								})
								return;
							} else if (res.data.code == 200) {
								uni.setStorageSync('cookies', res.cookies[0])
								uni.setStorageSync('token', res.data.data.refreshToke)
								uni.setStorageSync('refreshtoken', res.data.data
									.refreshToke)
								uni.setStorageSync('expireTime', res.data.data
									.expireTime)
								uni.showToast({
									title: "登陆成功"
								})
								uni.request({
									url: BaseUrl + '/user/userDetail',
									method: 'GET',
									header: {
										'Content-Type': 'application/json',
										'token': res.data.data.refreshToke
									},
									success: (res) => {
										let data = res.data.data
										this.userinfo = data
										this.userinfo.password = ''
										uni.setStorageSync('userinfo',
											this.userinfo)
										setTimeout(() => {
											uni.reLaunch({
												url: '../index/index',
											})
										}, 1000)

									}
								})

							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
			},

			formReset: function(e) {
				// console.log('清空数据')
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		background-color: #fff;
		position: relative;

		.head_img {
			position: relative;
			left: 50%;
			transform: translate(-50%);
		}

		.center {

			margin-top: 100upx;

			.inp {
				display: flex;
				margin-bottom: 40upx;
				margin-left: 60upx;
				margin-right: 50upx;
				border-bottom: solid #888 1upx;
				height: 80upx;
				line-height: 80upx;



				.inpu {
					margin-left: 10upx;
					height: 80upx;
					width: 100%;
				}
			}

			.hoverr {
				border-bottom: solid #888 5upx;
			}

			.btns {
				display: flex;
				margin-top: 90upx;

				.btn {
					color: #fff;
					width: 30%;
					height: 70upx;
					line-height: 70upx;
					background-color: #18aeff;
				}
			}
		}
	}
</style>
